import { useModel } from 'umi';
import { CloseOutlined } from '@ant-design/icons';
import './index.less';
import { useRef, useState } from 'react';

import Magnifier from '../Magnifier';

function Thumbnail(props) {
  const { isThumbnailShow, setToPanoramaId } = useModel('Panorama.data', (ret) => ({
    isThumbnailShow: ret.modalShow.isThumbnailShow,
    setToPanoramaId: ret.setToPanoramaId,
  }));
  const magnifierRef = useRef<any>(null);
  const [selectItem, setSelectItem] = useState({ id: 183 });
  const [show, setShow] = useState(false);
  const handleToPanorama = (item: any) => {
    selectItem.id = item.id;
    setSelectItem(selectItem);
    setToPanoramaId(item.id);
    magnifierRef.current?.handleSetOffset(item.offset);
  };

  const points = [
    {
      id: 183,
      offset: [30, 20],
    },
    {
      id: 184,
      offset: [30, 70],
    },
    {
      id: 185,
      offset: [90, 40],
    },
  ];

  return (
    <>
      {isThumbnailShow && (
        <>
          {show && (
            <div className="thumbnailBox">
              <div className="header">
                <CloseOutlined
                  onClick={() => {
                    setShow(false);
                  }}
                  style={{ fontSize: 20 }}
                />
              </div>
              <img src={require('@/assets/images/thumbnail.png')} className="bgImg" />
            </div>
          )}
          <div
            className={'thumbnail-fadeIn'}
            onClick={() => {
              setShow(true);
            }}
          >
            <div className="thumbnail-title">平面图</div>
            <img src={require('@/assets/images/thumbnail.png')} className="bgImg" />
            {points?.map((item, index) => {
              return (
                <a
                  onClick={(e) => {
                    e.stopPropagation();
                    handleToPanorama(item);
                  }}
                  className={`btn ${selectItem.id === item.id ? 'selected' : ''}`}
                  key={index}
                  style={{ left: item.offset[0], top: item.offset[1] }}
                ></a>
              );
            })}
            <Magnifier ref={magnifierRef} />
          </div>
        </>
      )}
    </>
  );
}

export default Thumbnail;
